h1.title img
  max-height: 65px
  width: auto

h1.title a
  opacity: 0.8

h1.title a:hover
  opacity: 1

ul.sub-menu
  position: absolute
  z-index: 99
  background: rgba(255, 255, 255, 0.9)
  transition: opacity 0.4s ease 0s
  transition-property: transform, left, opacity
  opacity: 0
  transform: translateY(20px)
  display: none

  li
    white-space: nowrap
    min-width: 5em

nav.navbar i
  display: none

+from($navbar-breakpoint)
  .navbar-menu li, .sub-menu li
    &:hover
      transition: all 0.3s ease 0s
      background-color: hsla(338, 80%, 98%, 0.8)

    ul
      display: none

  ul.sub-menu.is-active
    border-radius: 3px
    display: block
    transform: none
    opacity: 1
    padding: 0

+until($navbar-breakpoint)
  .navbar-menu li
    padding: 0

    ul
      margin-left: 0.7rem

      // background: #363636

    a
      padding: 0.5rem 0.95rem
      display: block

    a:hover
      border-bottom-color: #fef6f9
      background-color: hsla(338, 80%, 98%, 0.8)
      transition: all 0.3s ease 0s
